<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品选择</title>
    <style>
       html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #F7F8FA;
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    font-weight: bold;
    text-align: center;
    margin: 18px 0 10px 0;
    color: #222;
    letter-spacing: 1px;
}

.product-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 4vw, 28px);
    padding: 0 clamp(4px, 2vw, 16px) clamp(10px, 2vw, 24px) clamp(4px, 2vw, 16px);
}

.product-card {
    background: #fff;
    border-radius: 12px;
    padding: clamp(20px, 6vw, 32px) clamp(16px, 6vw, 32px);
    box-shadow: 0 2px 12px rgba(64,118,253,0.08), 0 1.5px 4px rgba(64,118,253,0.04);
    border: 1px solid #f0f1f3;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(64,118,253,0.13), 0 2px 8px rgba(64,118,253,0.10);
    transform: translateY(-2px) scale(1.01);
}

.product-title {
    font-size: clamp(1rem, 4vw, 1.15rem);
    color: #222;
    margin-bottom: clamp(8px, 2vw, 12px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 2vw, 12px);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.product-icon {
    height: 20px;
    width: auto;
}

.product-description {
    color: #555;
    margin-bottom: clamp(10px, 2vw, 16px);
    font-size: clamp(0.92em, 3.5vw, 1.05em);
    line-height: 1.6;
    letter-spacing: 0.1px;
}

.select-button {
    background: #4076FD;
    color: #fff;
    border: none;
    padding: clamp(10px, 3vw, 13px) 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    width: 100%;
    font-size: clamp(1em, 3.5vw, 1.08em);
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(64,118,253,0.10);
    transition: background 0.2s, box-shadow 0.2s;
    text-align: center;
    letter-spacing: 0.5px;
}

.select-button:hover {
    background: #2250c6;
    box-shadow: 0 4px 16px rgba(64,118,253,0.18);
}

.error-message, .success-message {
    max-width: 480px;
    margin: 0 auto 20px auto;
    padding: 10px;
    border-radius: 4px;
    font-size: 1em;
    text-align: center;
}

.error-message {
    color: #dc3545;
    background-color: #f8d7da;
}

.success-message {
    color: #28a745;
    background-color: #d4edda;
}

/* 大屏幕下适当放宽 */
@media (min-width: 600px) {
    body {
        max-width: 480px;
        margin: 0 auto;
        padding: 32px 0;
    }
    .product-container {
        padding: 0;
        gap: 20px;
    }
    .product-card {
        padding: 24px 20px 24px 20px;
    }
    .product-title {
        font-size: 1.2em;
    }
    .product-description {
        font-size: 1.05em;
    }
    .select-button {
        font-size: 1.08em;
    }
}

.main-title {
    font-size: 24px;
    margin: 18px 0 6px 0;
    font-weight: 400;
    text-align: center;
    letter-spacing: 1px;
}

.description {
    font-size: 17px;
    color: #333;
    margin-bottom: 18px;
    margin-top: 4px;
    text-align: center;
    line-height: 1.6;
}

.form-group {
    margin-bottom: 18px;
    width: 100%;
}

.btn-submit {
    width: 85%;
    display: block;
    margin: 24px auto 10px auto;
    height: 46px;
    background-color: #366FFF;
    color: white;
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s;
    letter-spacing: 1px;
}
    </style>
</head>
<body>
    <h1>请选择您想体验的产品</h1>
    
    <div th:if="${errorMessage}" class="error-message" th:text="${errorMessage}"></div>
    <div th:if="${successMessage}" class="success-message" th:text="${successMessage}"></div>

    <div class="product-container">

        <div class="product-card">
            <div class="product-title">
                <svg class="product-icon" t="1749799377331" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1664"><path d="M412.95045567 153.384421a141.365895 141.365895 0 0 1 141.150316 141.150316 141.365895 141.365895 0 0 1-141.20421 141.096421A141.365895 141.365895 0 0 1 271.85403467 294.534737a141.365895 141.365895 0 0 1 141.150316-141.204211z m495.184843 402.162526a54.110316 54.110316 0 0 1 76.207157 0.10779 54.056421 54.056421 0 0 1-0.107789 76.207158l-328.488421 327.949473a53.733053 53.733053 0 0 1-38.049684 15.683369c-0.538947 0-1.024 0-1.670737-0.10779a53.733053 53.733053 0 0 1-38.696421-18.108631l-158.504421-179.846737a53.679158 53.679158 0 0 1 4.742737-75.991579 53.894737 53.894737 0 0 1 75.991579 4.850526l120.670315 136.838737 287.905685-287.582316z m-294.426948 97.657264a1049.168842 1049.168842 0 0 1 79.386948-72.218948 391.599158 391.599158 0 0 0-128.808421-90.543158c58.906947-45.379368 97.495579-115.981474 97.495578-195.907368A249.101474 249.101474 0 0 0 412.95045567 45.756632 249.101474 249.101474 0 0 0 164.06456167 294.534737c0 79.710316 38.373053 149.989053 96.956631 195.530105C123.91298267 549.133474 27.49529867 685.541053 27.49529867 844.153263a53.786947 53.786947 0 1 0 107.627789 0 278.096842 278.096842 0 0 1 277.827368-277.773474c79.063579 0 150.096842 33.522526 200.757895 86.770527" fill="#0677ED" p-id="1665"></path></svg>
                活体检测
            </div>
            <div class="product-description">
                验证用户是否为真实活体本人，甄别欺诈行为，保障用户的利益。
            </div>
            <a href="/h5demo/liveness" class="select-button">开始体验</a>
        </div>

        <div class="product-card">
            <div class="product-title">
                <!-- <i class="fas fa-id-card product-icon"></i> -->
                <svg class="product-icon" t="1749799688495" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1807"><path d="M771.072 412.672h356.352v61.44H771.072z" fill="#0677ED" p-id="1808"></path><path d="M879.616 866.304l-3.072-3.072H176.128c-27.648 0-49.152-21.504-49.152-49.152V165.888c0-27.648 21.504-52.224 49.152-52.224h998.4c27.648 0 49.152 21.504 49.152 49.152v389.12l3.072 3.072c15.36 9.216 30.72 21.504 43.008 36.864l12.288 15.36V150.528c0-52.224-43.008-95.232-96.256-95.232H160.768c-52.224 0-96.256 43.008-96.256 95.232V829.44c0 52.224 43.008 95.232 96.256 95.232h759.808l-9.216-12.288c-12.288-15.36-22.528-30.72-31.744-46.08z m0 0" fill="#0677ED" p-id="1809"></path><path d="M771.072 547.84h105.472v61.44H771.072zM771.072 279.552h356.352v61.44H771.072zM1096.704 557.056c-114.688 0-204.8 89.088-204.8 203.776 0 110.592 93.184 203.776 204.8 203.776 114.688 0 204.8-89.088 204.8-203.776 0-113.664-93.184-203.776-204.8-203.776z m-3.072 327.68c-9.216 9.216-27.648 9.216-39.936 0L966.656 798.72c-9.216-9.216-9.216-27.648 0-36.864 9.216-9.216 27.648-9.216 39.936 0L1075.2 829.44l133.12-130.048c9.216-9.216 27.648-9.216 39.936 0 9.216 9.216 9.216 27.648 0 36.864l-154.624 148.48z m0 0M565.248 483.328c33.792-29.696 54.272-73.728 54.272-122.88 0-91.136-73.728-164.864-164.864-164.864-91.136 0-164.864 73.728-164.864 164.864 0 49.152 21.504 92.16 54.272 122.88-90.112 41.984-153.6 133.12-153.6 239.616H256c0-108.544 88.064-197.632 197.632-197.632 108.544 0 197.632 88.064 197.632 197.632H716.8c2.048-106.496-61.44-197.632-151.552-239.616zM455.68 262.144c54.272 0 98.304 44.032 98.304 98.304s-44.032 98.304-98.304 98.304-98.304-44.032-98.304-98.304c0-53.248 44.032-98.304 98.304-98.304z m0 0" fill="#0677ED" p-id="1810"></path></svg>
                实人认证
            </div>
            <div class="product-description">
                通过实时采集的人像信息和公安库身份证信息进行比对，确保用户身份的真实性。
            </div>
            <a href="/h5demo/real-person" class="select-button">开始体验</a>
        </div>

        <div class="product-card">
            <div class="product-title">
                <svg class="product-icon" t="1749799377331" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1664"><path d="M412.95045567 153.384421a141.365895 141.365895 0 0 1 141.150316 141.150316 141.365895 141.365895 0 0 1-141.20421 141.096421A141.365895 141.365895 0 0 1 271.85403467 294.534737a141.365895 141.365895 0 0 1 141.150316-141.204211z m495.184843 402.162526a54.110316 54.110316 0 0 1 76.207157 0.10779 54.056421 54.056421 0 0 1-0.107789 76.207158l-328.488421 327.949473a53.733053 53.733053 0 0 1-38.049684 15.683369c-0.538947 0-1.024 0-1.670737-0.10779a53.733053 53.733053 0 0 1-38.696421-18.108631l-158.504421-179.846737a53.679158 53.679158 0 0 1 4.742737-75.991579 53.894737 53.894737 0 0 1 75.991579 4.850526l120.670315 136.838737 287.905685-287.582316z m-294.426948 97.657264a1049.168842 1049.168842 0 0 1 79.386948-72.218948 391.599158 391.599158 0 0 0-128.808421-90.543158c58.906947-45.379368 97.495579-115.981474 97.495578-195.907368A249.101474 249.101474 0 0 0 412.95045567 45.756632 249.101474 249.101474 0 0 0 164.06456167 294.534737c0 79.710316 38.373053 149.989053 96.956631 195.530105C123.91298267 549.133474 27.49529867 685.541053 27.49529867 844.153263a53.786947 53.786947 0 1 0 107.627789 0 278.096842 278.096842 0 0 1 277.827368-277.773474c79.063579 0 150.096842 33.522526 200.757895 86.770527" fill="#0677ED" p-id="1665"></path></svg>
                人脸认证 1:1
            </div>
            <div class="product-description">
                通过实时采集的人像信息和管理员预先上传的用户身份信息进行比对，确保用户身份的真实性。
            </div>
            <a href="/h5demo/faceauthcompare" class="select-button">开始体验</a>
        </div>


    </div>
</body>
</html>